<template>
  <div class="print_template" v-loading="loading" element-loading-text="加载中...">
    <div class="header">
      <div class="btn_group">
        <HPlainButton @click="createBlank">创建空白模版</HPlainButton>
        <el-dropdown trigger="click">
          <HButton :disabled="deleteId.length === 0">
            批量操作
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </HButton>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleClick(1)">
                <el-icon>
                  <CircleCheck />
                </el-icon>
                批量启用
              </el-dropdown-item>
              <el-dropdown-item @click="handleClick(2)">
                <el-icon>
                  <CircleCheck />
                </el-icon>
                批量禁用
              </el-dropdown-item>
              <el-dropdown-item @click="handleClick(3)">
                <el-icon>
                  <Delete />
                </el-icon>
                批量删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="search">
        <el-input
          v-model.trim="name"
          placeholder="模版名称"
          clearable
          @keyup.enter="getList"
          @clear="getList"
        />
        <HButton type="primary" @click="getList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
      </div>
    </div>
    <div class="table">
      <el-table
        :border="true"
        stripe
        resizable
        :data="tableData"
        height="100%"
        @selection-change="selectAll"
      >
        <el-table-column type="selection" fixed="left" width="40" />
        <el-table-column type="index" label="序号" fixed="left" width="50" :align="'center'" />
        <el-table-column
          show-overflow-tooltip
          prop="name"
          fixed="left"
          label="模版名称"
          width="200"
        />
        <el-table-column show-overflow-tooltip prop="size" label="纸张尺寸 (宽*高)" width="200">
          <template v-slot="item">
            <span>{{ item.row.width }}mm</span>*<span>{{ item.row.height }}mm</span>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="rowQty" label="单行数量" width="90" />
        <el-table-column show-overflow-tooltip prop="createEmp" label="创建人" />
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="180" />
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="180" />
        <el-table-column prop="status" label="模版状态" width="90" fixed="right" :align="'center'">
          <template v-slot="item">
            <div class="flex_justify_center">
              <HStatus v-if="!item.row.status">启用</HStatus>
              <HStatus v-else type="info">禁用</HStatus>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="60">
          <template v-slot="scope">
            <HLink @click="goDetail(scope.row.id)"> 详细 </HLink>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <Pagination
        ref="paginDom"
        :list_total="total"
        @size-change="getList"
        @current-change="getList(false)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { printTemplateList, activeDeletePrintTemplate, deletePrintTemplate } from '@/api/code'
  import Pagination from '@/components/Pagination/index.vue'
  import { Action, ElMessage, ElMessageBox, MessageBoxState } from 'element-plus'
  import { Search, ArrowDown, CircleCheck, Delete } from '@element-plus/icons-vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.snCode.printTemplate,
  })

  const router = useRouter()
  const route = useRoute()
  const total = ref(0)
  const name = ref(null)
  const loading = ref(true)
  const paginDom = ref() // 分页dom
  const deleteId = ref([])
  const createBlank = () => {
    router.push({ path: `/code/blank/${1}` })
  }
  const goDetail = (id) => {
    router.push({ path: `/code/blank/${id}` })
  }
  const tableData = ref(null)
  onMounted(() => {
    getList()
  })
  const getList = (val = true) => {
    loading.value = true
    if (val && paginDom.value) {
      paginDom.value.setPage()
    }
    let data = {
      limit: paginDom.value.size || 0,
      name: name.value || '',
      page: paginDom.value.current || 0,
    }
    printTemplateList(data).then((res) => {
      if (res.data.success) {
        tableData.value = res.data.data.rows
        total.value = parseInt(res.data.data.total) || 0
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 5000,
          plain: true,
        })
      }
      loading.value = false
    })
  }
  const handleClick = (val) => {
    if (deleteId.value.length == 0) {
      ElMessage({
        showClose: true,
        message: '请先选择操作对象！',
        type: 'warning',
        duration: 5000,
        plain: true,
      })
      return
    }

    if (val == 3) {
      ElMessageBox.confirm('确定删除该模版吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
        autofocus: false,
        beforeClose: (action: Action, instance: MessageBoxState, done: () => void) => {
          if (action === 'cancel' || action === 'close') {
            done()
          }

          if (action === 'confirm') {
            instance.cancelButtonLoading = true
            instance.confirmButtonLoading = true
            deletePrintTemplate(deleteId.value).then((res) => {
              instance.cancelButtonLoading = false
              instance.confirmButtonLoading = false
              done()
              if (res.data.success) {
                ElMessage({
                  showClose: true,
                  message: res.data.message,
                  type: 'success',
                  duration: 5000,
                  plain: true,
                })
                getList()
              } else {
                ElMessage({
                  showClose: true,
                  message: res.data.message,
                  type: 'error',
                  duration: 5000,
                  plain: true,
                })
              }
            })
          }
        },
      })
      return
    }
    let status = false
    if (val == 2) {
      status = true
    }

    ElMessageBox.confirm(status ? '确定禁用该模版吗？' : '确定启用该模版吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      autofocus: false,
      beforeClose: (action: Action, instance: MessageBoxState, done: () => void) => {
        if (action === 'cancel' || action === 'close') {
          done()
        }

        if (action === 'confirm') {
          instance.cancelButtonLoading = true
          instance.confirmButtonLoading = true
          activeDeletePrintTemplate(deleteId.value, status).then((res) => {
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
            done()
            if (res.data.success) {
              ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'success',
                duration: 5000,
                plain: true,
              })
              getList()
            } else {
              ElMessage({
                showClose: true,
                message: res.data.message,
                type: 'error',
                duration: 5000,
                plain: true,
              })
            }
          })
        }
      },
    })
  }
  const selectAll = (val) => {
    deleteId.value = val.map((o) => o.id)
  }
  watch(route, (value) => {
    if (value.name === 'printTemp') {
      getList()
    }
  })
</script>

<style scoped lang="scss">
  @import './PrintTemplate.scss';
</style>
